@import "media-queries";

.index{
  .mpy-avg-sm-3{
    margin: 0.5rem 2rem;
    li{
      background-color: $mainColor;
      text-align: center;
      border:0.5rem solid #fff;
      border-radius:1rem;
      img{
        width: 3.8rem;
        margin-top: 0.5rem;
      }
      .title{
        margin: 0;
        padding: 0;
        font-size: 1rem;
      }
    }
  }
  .mpy-hotProduct{
    background:#eeeeee;
    padding-bottom: 1.2rem;
    .mpy-hotProduct-hd{
      h1{
        margin: 1.2rem 2rem;
        font-size: 1.2rem;
        color: $AuxiliaryFontBlackColor;
        float: left;
      }
      a{
        margin: 1.2rem 1.5rem;
        font-size: 1rem;
        color:$mainFontColor;
        float: right;
      }
    }

    .mpy-hotProduct-list{
      margin: auto 1rem;
      .mpy-hotProduct-item{
        display: block;
        background-color: $backgroudColor;
        border: 0.3rem solid #eeeeee;
        img{
          margin-bottom:0 ;
          border: 0;
          min-width: 12rem;
          min-height: 12rem;
          padding: 0!important;
        }
        h1{
          margin: 1rem;
          line-height: 1.5rem;
          font-size: 1rem;
        }
        span{
          display: block;
          width: 12rem;
          margin-left: 1rem  ;
          font-size: 1.2rem;
          color: $AuxiliaryRedColor;
        }
      }
    }
  }
  .mpy-hotLesson{
    .mpy-hotLesson-hd{
      h1{
        margin: 1.2rem 2rem;
        font-size: 1.2rem;
        color: $AuxiliaryFontBlackColor;
        float: left;
      }
    }
    .mpy-hotLesson-list{
      margin: auto 2rem;
      .mpy-hotLesson-item{
        text-align: center;
        img{
          width: 3.4rem;
          border: 0;
          padding: 0;
          margin: 0 auto;
        }
        h1{
          margin: 0.5rem 0;
          font-size:1rem;
        }
      }
    }
  }

}
